<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="created" content="2018-10-23T06:18:10.521000000">
    <meta name="changed" content="2018-10-23T06:18:42.262000000">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Language" content="en">
    <title>
      Tutorial: Adding gates
    </title>
    <link rel="stylesheet" type="text/css" href="../../style.css">
  </head>
  <body>
    <div class="maindiv">
      <p>
        <b>Next:</b> <a href="tutor-wires.html">Step 0: Orienting yourself</a>
      </p>
      <h2>
        Step 1: Adding gates
      </h2>
      <p>
        Recall that we're trying to build the following circuit in Logisim.
      </p>
      <p>
      <p align="center">
        <img class="notscal" src="../../../../img-guide/tutorial-xor-circ.png" alt="#########">
      </p>
      </p>
      <p>
        I suggest building a circuit by inserting the gates first as a sort of skeleton and then connecting them with wires later. The first thing we'll do is to add the two AND gates. Click on the <b class=propertie>"AND"</b> tool in the toolbar (<img class=intxt src="../../../../img-guide/tutorial-toolsbar-and.png" alt="#########">, the next-to-last tool listed). Then click in the editing area where you want the first AND gate to go. Be sure to leave plenty of room for stuff on the left. Then click the AND tool again and place the second AND gate below it.
      </p>
      <p align="center">
        <img src="../../../img-guide/tutorial-1-ands.png" alt="#########">
      </p>
      <p>
        Notice the five dots on the left side of the AND gate. These are spots where wires can be attached. It happens that we'll just use two of them for our XOR circuit; but for other circuits, you may find that having more than two wires going to an AND gate is useful. The number of inputs can be modified in the properties <b class=propertie>"Number of inputs"</b>
      </p>
      <p>
        Now add the other gates. First click on the <b class=propertie>"OR"</b> tool (<img class=intxt src="../../../../img-guide/tutorial-toolsbar-or.png" alt="#########">); then click where you want it. And place the two NOT gates into the canvas using the <b class=propertie>"NOT"</b> tool (<img class=intxt src="../../../../img-guide/tutorial-toolsbar-not.png" alt="#########">).
      </p>
      <p align="center">
        <img src="../../../img-guide/tutorial-2-gates.png" alt="#########">
      </p>
      <p>
        I left a little space between the NOT gates and the AND gates; if you want to, though, you can put them up against each other and save yourself the effort of connecting them with a wire later.
      </p>
      <p>
        Now we want to add the two inputs <var>x</var> and <var>y</var> into the diagram. Select the <b class=propertie>"Input"</b> tool (<img class="icontxt" src="../../../../icons/1616/toolpininput.png" alt="#########">), and place the pins down. You should also place an output pin next to the OR gate's output using the <b class=propertie>"Output"</b> tool (<img class="icontxt" src=
        "../../../../icons/1616/toolpinoutput.png" alt="#########">). (Again, I'm leaving a bit of space between the OR gate and the output pin, but you might choose to place them right next to each other.)
      </p>
      <p align="center">
        <img src="../../../img-guide/tutorial-3-comps.png" alt="#########">
      </p>
      <p>
        If you decide you don't like where you placed something, then you can select it using the <b class=propertie>"Edit"</b> tool (<img class="icontxt" src="../../../../icons/1616/toolselect.png" alt="#########">) and drag it to the desired spot. Or you can delete it altogether by selecting <b class=menu>|&nbsp;Edit&nbsp;|</b> → <b class=menu>|&nbsp;Delete&nbsp;|</b> or pressing the <b class="tkeybd">Delete</b> key or <b class="tkeybd">Ctrl-X</b> keys.
      </p>
      <p>
        As you place each component of the circuit, you'll notice that as soon as the component is placed, Logisim reverts to the <b class=propertie>"Edit"</b> tool (<img class="icontxt" src="../../../../icons/1616/toolselect.png" alt="#########">) so that you can move the recently-placed component or (as we'll see soon) connect the component to others by creating wires. If you want to add a copy of the recently placed component, a shortcut is to press <b class="tkeybd">Ctrl-D</b> to duplicate the selection. (Some computers use another keys for menus, such as the Command key on Macintoshes. You would press that key with the D key.)
      </p>
      <p>
        <b>Next:</b> <a href="tutor-wires.html">Step 2: Adding wires</a>
      </p>
    </div>
  </body>
</html>
